<template>
  <div class="status-card">
    <div class="status-head">
      <span class="title-name">{{ dataItem.name }}</span>
      <div class="status">
        <span :class="dataItem.s === 1 ? 'green' : ''" />
        <span :class="dataItem.s !== 1 ? 'red' : ''" />
      </div>
      <i v-if="dataItem.s === 1" :class="dataItem.s === 1 ? 'green' : ''"
        >开机</i
      >
      <i v-else :class="dataItem.s !== 1 ? 'red' : ''">关机</i>
    </div>
    <div class="status-body">
      <div class="cold-img"></div>
      <div class="weektime">
        <div class="hour">{{ dataItem.bt || "-" }}</div>
        <div class="hour-text">本周运行时间</div>
        <div class="img1 move1" />
        <div class="img2 move2" />
      </div>
      <div class="totaltime">
        <div class="hour">{{ dataItem.bts || "-" }}</div>
        <div class="hour-text">总运行时间</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["dataItem"],
};
</script>
<style lang="less" scoped>
.red {
  color: red;
}
.green {
  color: #25df2e;
}
.status-card {
  width: 100%;
  height: 210px;
  background-color: #051429;
  margin: 5px auto;
  box-sizing: border-box;
  border-radius: 10px;
  // background: url("../../assets/img/currentbg.png") no-repeat;
  // background-size: 100% 100%;
  .status-head {
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid rgba(185, 185, 185, 0.4);
    padding: 0 10px;
    box-sizing: border-box;
    .title-name {
      margin-left: 20px;
    }
    .status {
      float: right;
      width: 50px;
      height: 30px;
      border: 1.5px solid #fff;
      border-radius: 20px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin: 10px;
    }
    .status span {
      display: inline-block;
      width: 12px;
      height: 12px;
      border-radius: 6px;
      background: #bbb;
    }
    .status span.red {
      background: red;
    }
    .status span.green {
      background: #25df2e;
    }
  }
  .status-head span {
    // font-size: 12px;
    font-weight: 600;
    color: #ccc;
  }
  .status-head i {
    // font-size: 1.5rem;
    font-weight: 600;
    font-style: normal;
    // color: #fff;
    float: right;
  }

  .status-body {
    width: 100%;
    height: 65%;
    position: relative;

    .cold-img {
      position: absolute;
      top: 50%;
      left: 20px;
      transform: translateY(-50%);
      width: 160px;
      height: 100px;
      background: url("../../assets/img/run-icon.png") no-repeat center center;
      background-size: cover;
    }
    .weektime,
    .totaltime {
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
      align-content: center;
    }
    .totaltime {
      width: 130px;
      height: 130px;
      position: absolute;
      top: 50%;
      left: 85%;
      transform: translate(-50%, -50%);
    }
    .weektime {
      width: 130px;
      height: 130px;
      position: absolute;
      top: 50%;
      left: 45%;
      transform: translate(-50%, -50%);
      .hour{
        color: #fceb28;
      }
    }
  }
}
.img1 {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("../../assets/img/bigcircle.png") no-repeat center center;
  background-size: 100% 100%;
}

.img2 {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("../../assets/img/smallcircle.png") no-repeat center center;
  background-size: 88% 88%;
}

.move1 {
  animation: myMove1 5s ease-in infinite alternate;
  -webkit-animation: myMove1 5s ease-in infinite alternate;
}
.move2 {
  animation: myMove2 3s ease infinite alternate;
  -webkit-animation: myMove1 3s ease infinite alternate;
}

@keyframes myMove1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes myMove1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes myMove2 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes myMove2 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.hour {
  font-size: 20px;
  color: #fff;
  font-weight: 600;
  text-align: center;
  margin-bottom: 10px;
}
.hour-text {
  font-size: 16px;
  color: #ccc;
  text-align: center;
}
</style>